<template>
    <div class="container">
        <el-card class="box-card1">
            <div slot="header" class="title">全国疫情数据(含港澳台)</div>
            <div class="list-total">
                <div class="item cover_input">
                    <h4>境外输入</h4>
                    <div class="number">{{ total.input }}</div>
                    <p class="added">
                        较昨日
                        <span>+{{ today.input }}</span>
                    </p>
                </div>
                <div class="item cover_nosymptom">
                    <h4>无症状感染者</h4>
                    <div class="number">{{ extData.noSymptom }}</div>
                    <p class="added">
                        较昨日
                        <span>+{{ extData.incrNoSymptom }}</span>
                    </p>
                </div>
                <div class="item cover_today_confirm">
                    <h4>现有确诊</h4>
                    <div class="number">
                        {{ total.confirm - total.dead - total.heal }}
                    </div>
                    <p class="added">
                        较昨日
                        <span>+{{ today.storeConfirm }}</span>
                    </p>
                </div>
                <div class="item cover_confirm">
                    <h4>累计确诊</h4>
                    <div class="number">{{ total.confirm }}</div>
                    <p class="added">
                        较昨日
                        <span>+{{ today.confirm }}</span>
                    </p>
                </div>
                <div class="item cover_dead">
                    <h4>累计死亡</h4>
                    <div class="number">{{ total.dead }}</div>
                    <p class="added">
                        较昨日
                        <span>+{{ today.dead }}</span>
                    </p>
                </div>
                <div class="item cover_heal">
                    <h4>累计治愈</h4>
                    <div class="number">{{ total.heal }}</div>
                    <p class="added">
                        较昨日
                        <span>+{{ today.heal }}</span>
                    </p>
                </div>
            </div>
            <div class="cover_time">截至{{ lastUpdateTime }}</div>
        </el-card>
        <china-map></china-map>
        <line-chart id="line-chart"></line-chart>
        <time-line id="time-line"></time-line>
    </div>
</template>

<script>
    import request from "@/utils/request";
    import LineChart from './components/lineChart.vue'
    import ChinaMap from './components/map.vue'
    import TimeLine from './components/timeLine.vue'

    export default {
        name: 'Statistics',
        components: {
            LineChart,
            ChinaMap,
            TimeLine,
        },
        data() {
            return {
                total: {},
                today: {},
                extData: {},
                lastUpdateTime: '',
            }
        },
        created() {
            this.getInfo()
        },
        mounted() {
        },
        methods: {
            getInfo() {
                request.get("/other/getOtherData", {
                    params: {
                        url: 'https://c.m.163.com/ug/api/wuhan/app/data/list-total',
                    }
                }).then(data => {
                    this.today = data.data.data.chinaTotal.today
                    this.total = data.data.data.chinaTotal.total
                    this.extData = data.data.data.chinaTotal.extData
                    this.lastUpdateTime = data.data.data.lastUpdateTime
                })
            },
        },
    }
</script>
<style lang="scss" scoped>
    .box-card1 {
        width: 440px;
        float: left;
        margin-left: 20px;
    }

    .list-total {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .title {
        color: #333;
        font-size: 24px;
    }

    .item {
        width: 120px;
        height: 100px;
        margin-bottom: 15px;
        border: 1px dashed #ccc;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: space-around;
    }

    h4 {
        text-align: center;
        color: #333;
    }

    .number {
        text-align: center;
        color: #ffa352;
        font-weight: 700;
        font-size: 26px;
    }

    .added {
        text-align: center;
        color: #999;
    }

    .added span {
        color: #ffa352;
    }

    .cover_nosymptom .added span {
        color: #791618;
    }

    .cover_nosymptom .number {
        color: #791618;
    }

    .cover_today_confirm .number {
        color: #e44a3d;
    }

    .cover_today_confirm .added span {
        color: #e44a3d;
    }

    .cover_confirm .number {
        color: #a31d13;
    }

    .cover_confirm .added span {
        color: #a31d13;
    }

    .cover_dead .number {
        color: #333;
    }

    .cover_dead .added span {
        color: #333;
    }

    .cover_heal .number {
        color: #34aa70;
    }

    .cover_heal .added span {
        color: #34aa70;
    }

    .cover_time {
        color: #a9a9a9;
    }
</style>
